<!-- 药品管理 -->
<template>
  <div class="app-container">
    <el-tabs v-model="avtiveName" type="border-card" @tab-click="handleTabClick">
      <el-tab-pane label="已取药" name="taken">
        <el-input
          v-if="currentTable === 'taken'"
          v-model="search"
          placeholder="请输入患者姓名进行搜索"
          style="width:500px;margin-bottom:20px;"
          prefix-icon="el-icon-search"
          clearable
          @input="handleSearch"
        />
        <el-table
          v-if="currentTable === 'taken'"
          ref="multipleTable"
          v-loading="listLoading"
          :data="filterData"
          element-loading-text="拼命加载中"
          max-height="500"
          border
          fit
          highlight-current-row
          @selection-change="handleSelectionChange"
        >
          <el-table-column align="center" label="患者id" width="100">
            <template slot-scope="scope">
              <!-- {{ scope.$index }} -->
              {{ scope.row.patient_id }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="患者名称" width="200">
            <template slot-scope="scope">
              {{ scope.row.patient_name }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="时间">
            <template slot-scope="scope">
              {{ formataData(scope.row) }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="医生名称" width="200">
            <template slot-scope="scope">
              {{ scope.row.doctor_name }}
            </template>
          </el-table-column>
          <el-table-column label="查看处方中的药品" width="200" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="handleP(scope.row)">查看</el-button>
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" label="状态" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.take_status }}</span>
        </template>
      </el-table-column> -->
        </el-table>

        <el-dialog title="处方中的药品" :visible.sync="dialogVisible" width="60%">
          <!-- <el-option v-for="item in currentPrescription" :key = "item.medicine_name" :medicine_name="item.medicine_name" /> -->
          <el-table
            :data="currentMed"
            border
            fit
            highlight-current-row
            :row-class-name="tableRow"
          >
            <el-table-column label="药品名称" width="150" align="center">
              <template slot-scope="scope">
                {{ scope.row.medicine_name }}
              </template>
            </el-table-column>
            <el-table-column label="数量" width="100" align="center">
              <template slot-scope="scope">
                {{ scope.row.num }}
              </template>
            </el-table-column>
            <el-table-column label="状态" width="150" align="center">
              <template slot-scope="scope">
                {{ statusOp[scope.row.take_status] }}
              </template>
            </el-table-column>
            <el-table-column label="用法" align="center">
              <template slot-scope="scope">
                {{ scope.row.frequency }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="240">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  :disabled="scope.row.take_status === 'refund'"
                  @click="handleRefund(scope.row)"
                >退药</el-button>
              </template>
            </el-table-column>
          </el-table>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">关闭</el-button>
          </span>
        </el-dialog>
      </el-tab-pane>
      <el-tab-pane label="未取药" name="untaken">
        <el-input
          v-if="currentTable === 'untaken'"
          v-model="search2"
          placeholder="请输入患者姓名进行搜索"
          style="width:500px;margin-bottom:20px;"
          prefix-icon="el-icon-search"
          clearable
          @input="handleSearch"
        />
        <el-table
          v-if="currentTable === 'untaken'"
          ref="multipleTable"
          v-loading="listLoading"
          :data="filterData2"
          element-loading-text="拼命加载中"
          max-height="500"
          border
          fit
          highlight-current-row
          @selection-change="handleSelectionChange"
        >
          <el-table-column align="center" label="序号" width="100">
            <template slot-scope="scope">
              {{ scope.$index }}
              <!-- {{ scope.row.id }} -->
            </template>
          </el-table-column>
          <el-table-column align="center" label="时间">
            <template slot-scope="scope">
              {{ formataData(scope.row) }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="患者名称" width="200">
            <template slot-scope="scope">
              {{ scope.row.patient_name }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="医生名称" width="200">
            <template slot-scope="scope">
              {{ scope.row.doctor_name }}
            </template>
          </el-table-column>
          <el-table-column label="查看处方中的药品" width="200" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="handlePP(scope.row)">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="200">
            <template slot-scope="scope">
              <el-button size="mini" type="success" @click="handleDispense(scope.row)">发药</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-dialog title="处方中的药品" :visible.sync="dialog2Visible" width="60%">
          <el-table
            :data="currentMed2"
            border
            fit
            highlight-current-row
            :row-class-name="tableRow"
          >
            <el-table-column label="药品名称" width="150" align="center">
              <template slot-scope="scope">
                {{ scope.row.medicine_name }}
              </template>
            </el-table-column>
            <el-table-column label="数量" width="100" align="center">
              <template slot-scope="scope">
                {{ scope.row.num }}
              </template>
            </el-table-column>
            <el-table-column label="状态" width="150" align="center">
              <template slot-scope="scope">
                {{ statusOp[scope.row.take_status] }}
              </template>
            </el-table-column>
            <el-table-column label="用法" align="center">
              <template slot-scope="scope">
                {{ scope.row.frequency }}
              </template>
            </el-table-column>
          </el-table>

          <span slot="footer" class="dialog-footer">
            <el-button @click="dialog2Visible = false">关闭</el-button>
          </span>
        </el-dialog>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import { fetchList, fetchListM, dispenseMedicine, refundMedicine } from '@/api/medicine'
import { statusOp } from './mockData'
import moment from 'moment'

export default {
  name: 'SelectExcel',

  data() {
    return {
      list: null,
      list2: null,
      statusOp,
      listLoading: true,
      listQuery: {},
      pay_status: '',
      // data: null,
      avtiveName: 'taken',
      // mockMedData,
      multipleSelection: [],
      // downloadLoading: false,
      search: '',
      search2: '',
      filename: '',
      dialogVisible: false,
      dialog2Visible: false,
      currentTable: 'taken',
      currentMed: null,
      currentMed2: null,
      currentPrescription: {}

    }
  },
  computed: {
    filterData() {
      const search = this.search.toLowerCase()
      if (!search) return this.list
      return this.list.filter(item => item.patient_name.toLowerCase().includes(search))
    },

    filterData2() {
      const search2 = this.search2.toLowerCase()
      if (!search2) return this.list2
      return this.list2.filter(item => item.patient_name.toLowerCase().includes(search2))
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    tableRow({ row, rowIndex }) {
      if (row.pay_status === 'refund') {
        return 'warning-row'
      }
      return ''
    },
    formataData(row) {
      return moment(row.time).format('YYYY-MM-DD HH:mm:ss')
    },

    fetchData() {
      this.listLoading = true

      // this.list = this.mockMedData
      // this.listLoading = false

      // fetchList(this.listQuery).then(response => {
      fetchList().then(response => {
        const items = response.prescriptions_take // 已取药
        const items2 = response.prescriptions_untake // 未取药
        // items.sort((a, b) => a.patient_id.localeCompare(b.name))
        // console.log(items2)
        this.list = items
        this.list2 = items2
        this.listLoading = false
      })
    },

    showTable(type) {
      this.currentTable = type
    },
    handleTabClick(tab) {
      this.showTable(tab.name)
    },

    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    handleSearch() {
      // 清除选中状态
      this.$refs.multipleTable.clearSelection()
    },
    handleP(row) {
      // console.log('Selected row', row)
      // console.log('Selected row', row.id)
      // this.currentPrescription = row
      this.dialogVisible = true
      fetchListM({ prescription_id: row.id }).then(response => {
        this.currentMed = response.medicine_uses
        this.listLoading = false
      })
    },

    handlePP(row) {
      // console.log('Selected row', row)
      // this.currentPrescription = row
      this.dialog2Visible = true
      fetchListM({ prescription_id: row.id }).then(response => {
        this.currentMed2 = response.medicine_uses
        this.listLoading = false
      })
    },

    handleDispense(row) {
      this.$confirm('确认要发药吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        dispenseMedicine({ prescription_id: row.id }).then(response => {
          this.$message({
            type: 'success',
            message: '发药成功!'
          })
          this.fetchData()
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '发药失败!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消发药'
        })
      })
    },
    handleRefund(row) {
      this.$confirm('确认要退药吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        refundMedicine({ medicine_use_id: row.id }).then(response => {
          this.$message({
            type: 'success',
            message: '退药成功!'
          })
          this.fetchData()
          // this.handlePP(row)
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '退药失败!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退药'
        })
      })
    }
  }
}
</script>

<style>
.el-table .warning-row{
  display: none;
}
</style>
